<template>
	<a-modal title="出库记录" :width="1400" :visible="visible" :confirmLoading="confirmLoading" :footer="null"
		@cancel="handleCancel">

		<a-card :bordered="false">
			<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true" :showPagination="false">
				<template slot="materialModelNumber" slot-scope="text, record">
					{{ record.material ? record.material.materialModelNumber : '' }}
				</template>
				<!-- <span slot="image" slot-scope="text">
					<image-preview :images="text" />
				</span> -->
				<span slot="image" slot-scope="text,record">
				<image-preview1 :images="text" :imageUrl="record.material.imageUrl" />
			</span>
			</s-table>
		</a-card>

	</a-modal>
</template>

<script>
import { STable } from '@/components'
import { page } from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage'

export default {
	components: {
		STable,
	},
	props: {
		readonly: false,
	},
	data() {
		return {
			title: null,
			advanced: false, // 高级搜索 展开/关闭
			queryParam: {},  // 查询参数
			viewState: '',
			columns: [
				{
					title: '序号', width: '80px',
					dataIndex: '',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '订单编号',
					dataIndex: 'orderNumber'
				},
				{
					title: '物料编号',
					dataIndex: 'materialCode'
				},
				{
					title: '物料名称',
					dataIndex: 'materialName',
				},
				{
					title: '规格',
					dataIndex: 'materialModelNumber',
					scopedSlots: { customRender: 'materialModelNumber' }
				},
				{
					title: '图片',
					dataIndex: 'image',
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '出库数量',
					dataIndex: 'number'
				},
				{
					title: '领用方',
					dataIndex: 'classGroupName'
				},
				{
					title: '出库时间',
					dataIndex: 'createTime'
				}
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				return page(Object.assign(parameter, this.queryParam)).then((res) => {
					res.data.rows.forEach(value => {
						value.normalNumber = 0
					})
					return res.data
				})
			},
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			replaceFields: {
				key: 'id',
			},
			visible: false,
			confirmLoading: false,
			record: null
		}
	},
	methods: {
		show(record) {
			this.visible = true
			this.record = record
			this.queryParam.sourceOrderMaterialId = record.orderMaterialId
			setTimeout(() => {
				this.handleOk()
			}, 100)
		},
		handleOk() {
			this.$refs.table.refresh()
		},
		handleCancel() {
			this.visible = false
		},
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
